<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <style type="text/css">
        *{
            border:1px solid red;
        }
        body{
            width: 1024px;
            margin: 0px auto;
        }
        .top{
            height:30px;
            display: flex;
            justify-content: space-between;
        }
        header{
            display: flex;
            height:100px;
        }
        nav{
            height:50px;
        }
        /*https://www.w3school.com.cn/tiy/t.asp?f=css_navbar_horizontal_gray*/
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            border: 1px solid #e7e7e7;
            background-color: #f3f3f3;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: #666;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover:not(.active) {
            background-color: #ddd;
        }
        li a.active {
            color: white;
            background-color: #4CAF50;
        }
        /*https://www.w3school.com.cn/tiy/t.asp?f=css_navbar_horizontal_gray*/
        form{
            display: flex;
            align-items: center;
        }
        form input{
            height: 30px;
            line-height: 30px;
        }
        input[type=search]{
            width: 400px;
        }
        main{
            height:400px;
        }
        .content{
            display: flex;
            flex-wrap: wrap;
        }
        /*https://www.w3school.com.cn/tiy/t.asp?f=css_ex_pagination_border*/
        .pagination {
            display: flex;
            justify-content: flex-end;
        }

        .pagination a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
        }

        .pagination a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        .pagination a:hover:not(.active) {background-color: #ddd;}
        /*https://www.w3school.com.cn/tiy/t.asp?f=css_ex_pagination_border*/
        footer{
            height:60px;
            display: flex;
            justify-content: center;
        }
        .item{
            width: 300px;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="top">
    <div>
        <a href="#">登录</a>
        <a href="#">注册</a>
    </div>
    <a href="#">购物车</a>
</div>

<header>
    <img alt="" src="image/homepage/logo.png"/>
    <form action="">
        <input type="search">
        <input type="submit">
    </form>
</header>

<nav>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

<main>
    <div class="content">
        <c:forEach var="commodity" items="${requestScope.homeData.commodityList}">
            <div class="item">
                <img alt="" src="${commodity.imgpath}">
                <div>${commodity.description}</div>
                <div>
                        ${commodity.price}
                    <button>加入购物车</button>
                </div>
            </div>
        </c:forEach>
        <%--        <div class="item">--%>
        <%--            <img alt="" src="image/homepage/book/book1.jpg">--%>
        <%--            <div>腹有诗书气自华</div>--%>
        <%--            <div>--%>
        <%--                ￥45.00--%>
        <%--                <button>加入购物车</button>--%>
        <%--            </div>--%>
        <%--        </div>--%>
    </div>
    <div class="pagination">
        <a href="#">«</a>

        <c:forEach var="i" begin="${requestScope.homeData.firstPageForNavigation}" end="${requestScope.homeData.lastPageForNavigation}">
            <a href="#" class="active">${i}</a>
        </c:forEach>

        <%--        <a href="#">1</a>--%>
        <%--        <a href="#" class="active">2</a>--%>
        <%--        <a href="#">3</a>--%>
        <%--        <a href="#">4</a>--%>
        <%--        <a href="#">5</a>--%>
        <%--        <a href="#">6</a>--%>
        <a href="#">»</a>
    </div>
</main>

<footer>
    <div>版权：信息学院</div>
</footer>

</body>
</html>